<template>
  <div class="discoveryItem" :class="{ isFinds: type === 'finds' }">
    <header class="flex-row flex-vertical-center">
      <vue-img :src="user.avatar" class="icon"></vue-img>
      <div class="info flex-grow-limit">
        <div class="name flex-grow-limit flex-row flex-vertical-center flex-between">
          <span class="text-limit">{{ user.nick_name }}</span> 
          <img src="@img/btn/more.png" class="moreBtn" v-if="visibleMoreBtn" width="24px"
          @click.capture="$emit('clickMore', $event, data.id)">
        </div>
        <div class="date">{{ data.created_at | formatDate }}</div>
      </div>
    </header>

    <main>
      <div class="content">
        <span v-if="['finds', 'info'].includes(type)"
          :class="`tagType-${data.find_type}`"
        >#{{ data.find_type_str }}#</span>
        <span>{{ data.content }}</span>
      </div>
      <div class="pics" v-if="type !== 'info' && data.img">
        <vue-img v-for="(url, index) in data.img.split(',').filter((val, ind) => ind < 2)" :key="index" :src="url" 
        :style="{ width: data.img.split(',').length === 1 ? '60%' : '' }" />
      </div>
    </main>

    <footer class="flex-row" v-if="['finds', 'info'].includes(type)">
      <div class="left flex-row flex-grow flex-center">
        <img src="@img/btn/find_icon_comment_0@2x.png">
        <span>评论</span>
        <span v-if="data.comment_count">&nbsp;{{ data.comment_count }}</span>
      </div>
      <div class="right flex-row flex-grow flex-center"
        @click.capture="$emit('dian_zan', data.id, data.is_zan, $event)"
      >
        <img src="@img/btn/find_icon_like_1@2x.png" v-if="data.is_zan">
        <img src="@img/btn/find_icon_like_0@2x.png" v-else>
        <span :class="{ 'color-theme': data.is_zan }">
          <span>{{ data.is_zan ? '已' : '点' }}赞</span>
          <span v-if="data.zan_count">&nbsp;{{ data.zan_count }}</span>
        </span>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  props: ['data', 'type', 'visibleMoreBtn'],

  data (){
    return {
      
    }
  },

  filters: {
    formatDate (val){
      return val.replace(/^(.+) (.+?):\d\d$/, '$1  $2')
    }
  },

  computed: {
    user (){
      return this.data.user
    }
  },

}
</script>

<style lang="less" scoped>
.isFinds:not(foo){
  border-radius: initial;
}

.discoveryItem{
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  margin: 10px 0;

  header{
    .icon{
      width: 55px;
      height: 55px;
      border-radius: 50%;
    }

    .info{
      margin-left: 20px;

      .date{
        color: @subtext;
        font-size: small;
      }
    }
  }

  main{
    padding-top: 10px;

    .content{
      word-break: break-word;
    }

    .pics{
      padding-top: 10px;

      > img{
        width: calc(~'50% - 10px');
        margin: 0 5px;
        box-sizing: border-box;
        border-radius: 3px;
        object-fit: cover;
      }
    }
  }
}

.tagType-1{
  color: @danger;
}
.tagType-2{
  color: #FF7E38;
}
.tagType-3{
  color: @theme;
}

footer{
  height: 50px;
  box-sizing: border-box;
  border-top: 1px #eee solid;
  margin-bottom: -15px;
  margin-top: 10px;
  color: @subtext;

  img{
    width: 15px;
    margin: 10px;
  }

  .left{
    position: relative;

    &::before{
      content: '';
      position: absolute;
      width: 1px;
      height: 40%;
      background-color: #eee;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
  }
}
</style>